<script setup lang="ts">
import { useThemeStore } from '@/store'

// Props
interface Props {
  size?: 'small' | 'medium' | 'large'
  showLabel?: boolean
  variant?: 'button' | 'switch' | 'icon'
  floating?: boolean // 新增：是否启用悬浮模式
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' // 新增：悬浮位置
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  showLabel: false,
  variant: 'icon',
  floating: false,
  position: 'top-right',
})

// 使用主题 Store
const themeStore = useThemeStore()

// 主题图标映射
const themeIcons = {
  light: '☀️',
  dark: '🌙',
  auto: '🔄',
}

// 主题名称映射
const themeNames = {
  light: '浅色',
  dark: '深色',
  auto: '自动',
}

// 切换主题
function toggleTheme() {
  themeStore.toggleTheme()

  if (props.showLabel) {
    uni.showToast({
      title: `已切换到${themeNames[themeStore.currentTheme]}模式`,
      icon: 'none',
      duration: 1000,
    })
  }
}

// 设置指定主题
function setTheme(theme: keyof typeof themeNames) {
  themeStore.setTheme(theme)
}

// 暴露方法给父组件
defineExpose({
  toggleTheme,
  setTheme,
})
</script>

<template>
  <view
    class="theme-toggle"
    :class="[
      `size-${size}`,
      `variant-${variant}`,
      {
        floating,
        [`floating-${position}`]: floating,
      },
    ]"
  >
    <!-- 按钮样式 -->
    <button
      v-if="variant === 'button'"
      class="toggle-btn"
      @click="toggleTheme"
    >
      <text class="btn-icon">{{ themeIcons[themeStore.currentTheme] }}</text>
      <text v-if="showLabel" class="btn-label">{{ themeNames[themeStore.currentTheme] }}</text>
    </button>

    <!-- 开关样式 -->
    <view
      v-else-if="variant === 'switch'"
      class="toggle-switch"
      @click="toggleTheme"
    >
      <view class="switch-track">
        <view class="switch-thumb">
          <text class="switch-icon">{{ themeIcons[themeStore.currentTheme] }}</text>
        </view>
      </view>
      <text v-if="showLabel" class="switch-label">{{ themeNames[themeStore.currentTheme] }}</text>
    </view>

    <!-- 图标样式 -->
    <view
      v-else
      class="toggle-icon"
      @click="toggleTheme"
    >
      <text class="icon-text">{{ themeIcons[themeStore.currentTheme] }}</text>
      <text v-if="showLabel" class="icon-label">{{ themeNames[themeStore.currentTheme] }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.theme-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // 悬浮水泡效果
  &.floating {
    position: fixed;
    z-index: 9999;
    color: white;
    background: var(--primary-color, #32f08c);
    border-radius: 50%;
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);

    // 水泡浮动动画
    animation: floatingBubble 3s ease-in-out infinite;

    // 悬停效果
    &:hover {
      transform: scale(1.1) translateY(-2rpx);
      animation-play-state: paused;
    }

    // 点击效果
    &:active {
      transform: scale(0.95);
      transition: transform 0.1s ease;
    }

    // 位置设置
    &.floating-top-right {
      top: 40rpx;
      right: 40rpx;
    }

    &.floating-top-left {
      top: 40rpx;
      left: 40rpx;
    }

    &.floating-bottom-right {
      bottom: 40rpx;
      right: 40rpx;
    }

    &.floating-bottom-left {
      bottom: 40rpx;
      left: 40rpx;
    }

    // 悬浮模式下只显示圆形图标样式
    .toggle-btn,
    .toggle-switch,
    .toggle-icon {
      width: 100rpx !important;
      height: 100rpx !important;
      border-radius: 50% !important;
      background: transparent !important;
      border: none !important;
      color: white !important;
      font-size: 44rpx !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    // 隐藏文字标签
    .btn-label,
    .icon-label,
    .switch-label {
      display: none !important;
    }
  }

  // 尺寸变体
  &.size-small {
    .toggle-btn,
    .toggle-icon {
      width: 32px;
      height: 32px;
      font-size: 16px;
    }

    .btn-label,
    .icon-label,
    .switch-label {
      font-size: 12px;
    }

    // 悬浮模式小尺寸
    &.floating {
      .toggle-btn,
      .toggle-switch,
      .toggle-icon {
        width: 80rpx !important;
        height: 80rpx !important;
        font-size: 32rpx !important;
      }
    }
  }

  &.size-medium {
    .toggle-btn,
    .toggle-icon {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }

    .btn-label,
    .icon-label,
    .switch-label {
      font-size: 14px;
    }

    // 悬浮模式中等尺寸（默认）
    &.floating {
      .toggle-btn,
      .toggle-switch,
      .toggle-icon {
        width: 100rpx !important;
        height: 100rpx !important;
        font-size: 44rpx !important;
      }
    }
  }

  &.size-large {
    .toggle-btn,
    .toggle-icon {
      width: 48px;
      height: 48px;
      font-size: 24px;
    }

    .btn-label,
    .icon-label,
    .switch-label {
      font-size: 16px;
    }

    // 悬浮模式大尺寸
    &.floating {
      .toggle-btn,
      .toggle-switch,
      .toggle-icon {
        width: 120rpx !important;
        height: 120rpx !important;
        font-size: 52rpx !important;
      }
    }
  }

  // 按钮样式
  &.variant-button {
    .toggle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px 16px;
      background: var(--card-bg, #ffffff);
      border: 1px solid var(--border-color, #e5e5e5);
      border-radius: 8px;
      color: var(--text-color, #333333);
      transition: all 0.3s ease;
      width: auto;
      height: auto;

      &:hover {
        background: var(--primary-color, #007aff);
        color: white;
        border-color: var(--primary-color, #007aff);
      }

      &:active {
        transform: scale(0.98);
      }

      .btn-icon {
        font-size: inherit;
      }

      .btn-label {
        font-weight: 500;
      }
    }
  }

  // 开关样式
  &.variant-switch {
    gap: 12px;

    .toggle-switch {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .switch-track {
      width: 60px;
      height: 32px;
      background: var(--border-color, #e5e5e5);
      border-radius: 16px;
      position: relative;
      transition: all 0.3s ease;
      padding: 4px;

      &:hover {
        background: var(--primary-color, #007aff);
      }
    }

    .switch-thumb {
      width: 24px;
      height: 24px;
      background: white;
      border-radius: 50%;
      position: absolute;
      top: 4px;
      left: 4px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transform: translateX(0);

      .toggle-switch:hover & {
        transform: translateX(28px);
      }

      .switch-icon {
        font-size: 14px;
      }
    }

    .switch-label {
      color: var(--text-color, #333333);
      font-weight: 500;
    }
  }

  // 图标样式
  &.variant-icon {
    .toggle-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      color: var(--text-color, #333333);

      &:hover {
        background: var(--primary-color, #007aff);
        color: white;
        border-color: var(--primary-color, #007aff);
        transform: scale(1.05);
      }

      &:active {
        transform: scale(0.95);
      }

      .icon-text {
        font-size: inherit;
        line-height: 1;
      }

      .icon-label {
        font-size: 10px;
        font-weight: 500;
        line-height: 1;
        margin-top: 2px;
      }
    }
  }
}

// 深色模式适配
.dark-mode {
  .theme-toggle {
    &.variant-button {
      .toggle-btn {
        background: var(--card-bg, #2a2a2a);
        border-color: var(--border-color, #333333);
        color: var(--text-color, #ffffff);
      }
    }

    &.variant-switch {
      .switch-track {
        background: var(--border-color, #333333);
      }

      .switch-label {
        color: var(--text-color, #ffffff);
      }
    }

    &.variant-icon {
      .toggle-icon {
        background: rgba(42, 42, 42, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-color, #ffffff);
      }
    }

    // 悬浮模式深色主题适配
    &.floating {
      background: var(--primary-color, #32f08c);
    }
  }
}

// 水泡浮动动画
@keyframes floatingBubble {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8rpx) scale(1.02);
  }
}

// 呼吸动画（备用）
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

// 响应式适配
/* #ifdef H5 */
@media (max-width: 768px) {
  .theme-toggle.floating {
    &.floating-top-right,
    &.floating-top-left {
      top: 30rpx;
    }

    &.floating-top-right,
    &.floating-bottom-right {
      right: 30rpx;
    }

    &.floating-top-left,
    &.floating-bottom-left {
      left: 30rpx;
    }

    &.floating-bottom-right,
    &.floating-bottom-left {
      bottom: 30rpx;
    }

    .toggle-btn,
    .toggle-switch,
    .toggle-icon {
      width: 80rpx !important;
      height: 80rpx !important;
      font-size: 36rpx !important;
    }
  }
}
/* #endif */

// 小程序适配
/* #ifdef MP */
.theme-toggle.floating {
  // 小程序中去除阴影效果，提升性能
  background: var(--primary-color, #32f08c);
}
/* #endif */
</style>
